<template>
  <div>
    <div id="mbox">
      <mt-swipe style="top: -0.05rem;">
        <mt-swipe-item v-for="e in banner" :key="e.path">
          <div class="banner" :style="{'background-image': `url(${Port + e.path})`}"></div>
        </mt-swipe-item>
      </mt-swipe>
    </div>
  <div id="qy">企业服务</div>
  <fade :msg="ch">
    <l-slide :border="true">
    <litem name="服务介绍">
      <div class="box">
        <mt-swipe>
        <mt-swipe-item>
          <div class="sev_c">
            <router-link to="/shuichou/" tag="div">增加薪酬竞争力 >></router-link>
            <div>个税筹划可大幅提升员工现金收入，增强隐形薪酬竞争力</div>
          </div>
          <div class="sev_c">
            <router-link to="/shuichou/" tag="div">激励和保留员工 >></router-link>
            <div>有效激励和保留核心员工，大幅提升员工敬业度与满意度</div>
          </div>
        </mt-swipe-item>
        <mt-swipe-item>
          <div class="sev_c">
            <router-link to="/shuichou/" tag="div">节省运营成本 >></router-link>
            <div>薪酬代付业务可节约大量外包服务成本</div>
          </div>
          <div class="sev_c">
            <router-link to="/shuichou/" tag="div">节省人力成本 >></router-link>
            <div>通过个税筹划节约税金，对员工而言相当于涨薪，节省大量的人力成本</div>
          </div>
        </mt-swipe-item>
      </mt-swipe>
      </div>
    </litem>
    <litem name="各地优惠政策">
      <div class="box">
        <div class="yh">
          <router-link to="/bj_shuichou/" tag="div">北京优惠政策</router-link>
          <router-link to="/gz_shuichou/" tag="div">广州优惠政策</router-link>
          <router-link to="/sh_shuichou/" tag="div">上海优惠政策</router-link>
        </div>
        <div class="yh">
          <router-link to="/sz_shuichou/" tag="div">深圳优惠政策</router-link>
          <router-link to="/hz_shuichou/" tag="div">杭州优惠政策</router-link>
          <router-link to="/tj_shuichou/" tag="div">天津优惠政策</router-link>
        </div>
      </div>
    </litem>
    <litem name="常见问题">
      <div class="box">
        <router-link class="ques" v-for="e in scq" :to="e.href" :key="e.id" tag="div">
          {{e.title}}
        </router-link>
      </div>
    </litem>
  </l-slide>
  </fade>
  <fade :msg="dj">
    <l-slide :border="true">
      <litem name="服务介绍">
        <div class="box">
          <router-link to="/shebao/" class="sev_c" tag="div">
            <div>企业在线社保购买系统</div>
            <div>支持全国337个地级市社保公积金一键购买<br>推荐优质购保方案<br>推荐优质购服务商</div>
          </router-link>
        </div>
      </litem>
      <litem name="热门城市">
        <div class="box yh">
          <router-link to="/beijingshi_shebao/" tag="div">北京</router-link>
          <router-link to="/shanghaishi_shebao/" tag="div">上海</router-link>
          <router-link to="/guangzhoushi_shebao/" tag="div">广州</router-link>
          <router-link to="/shenzhenshi_shebao/" tag="div">深圳</router-link>
          <router-link to="/hangzhoushi_shebao/" tag="div">杭州</router-link>
          <router-link to="/tianjinshi_shebao/" tag="div">天津</router-link>
        </div>
      </litem>
      <litem name="常见问题">
        <div class="box">
         <router-link class="ques" v-for="e in sbq" :to="e.href" :key="e.id" tag="div">
          {{e.title}}
        </router-link>
      </div>
      </litem>
    </l-slide>
  </fade>
  <fade :msg="cj">
    <l-slide :border="true">
      <litem name="服务介绍">
        <div class="box">
          <router-link to="/canji/" class="sev_c" tag="div">
            <div>让残疾者的生活更美好</div>
            <div>构建以残障者的价值输出为基础的生态系统</div>
          </router-link>
        </div>
      </litem>
      <litem name="常见问题">
        <div class="box">
        <router-link class="ques" v-for="e in cjq" :to="e.href" :key="e.id" tag="div">
          {{e.title}}
        </router-link>
      </div>
      </litem>
    </l-slide>
  </fade>
  <div id="hy">
    行业解决方案
  </div>
  <div id="scheme">
    <scheme v-for="msg in schs" :msg="msg" :key="msg.title"/>
  </div>
  <router-link to="/ishouru.html" id="isr" tag="div">
    <div id="i_head"></div>
    <div id="i_text_1">找对方法交税，个税只交<span>0.5%</span></div>
    <div id="i_text_2">爱收入教你做一个精明的纳税人</div>
    <div id="i_img"></div>
  </router-link>
  <l-slide :height="8.4">
    <litem name="资讯首页">
      <Sitem v-for="msg in zxsy" :msg="msg" :key="msg.img"/>
      <more url="/news/"/>
    </litem>
    <litem name="合规税筹">
      <Sitem v-for="msg in hgsc" :msg="msg" :key="msg.img"/>
      <more url="/news/shuichou/"/>
    </litem>
    <litem name="社保公积金">
      <Sitem v-for="msg in sbgj" :msg="msg" :key="msg.img"/>
      <more url="/news/shebao/"/>
    </litem>
    <litem name="残疾人就业">
      <Sitem v-for="msg in cjjy" :msg="msg" :key="msg.img"/>
      <more url="/news/103/"/>
    </litem>
    <litem name="赚钱">
      <Sitem v-for="msg in zq" :msg="msg" :key="msg.img"/>
      <more url="/news/"/>
    </litem>
  </l-slide>
  <div class="line"></div>
  <div id="rel">
    <div>相关专题</div>
    <aitem v-if="hot[0]" :msg="hot[0]" />
    <router-link class="alist" v-for="(msg, i) in hot" v-if="i > 0" :style="{'margin-top': (i == 0 ? '0.5rem' : '0.3rem')}" :to="msg.href" :key="msg.title" tag="div">{{msg.title}}</router-link>
  </div>
  <div class="line"></div>
  <div id="counter">
    <div>计算器</div>
    <router-link to="/jsq/" tag="div">更多</router-link>
    <div class="c_box">
      <div class="citem" v-for="(count, i) in counters" :key="count.text[0]" v-if="i < 4">
        <router-link :to="count.url" tag="div">{{count.text[0]}}<br v-if="count.text[1] != ''">{{count.text[1]}}</router-link>
      </div>
    </div>
    <div class="c_box">
      <div class="citem" v-for="(count, i) in counters" :key="count.text[0]" v-if="i >= 4">
        <router-link :to="count.url" tag="div">{{count.text[0]}}<br v-if="count.text[1] != ''">{{count.text[1]}}</router-link>
      </div>
    </div>
  </div>
  <div class="line"></div>
  <div class="tactic">
    <div>战略伙伴</div>
    <div class="t_box">
      <div></div>
      <div></div>
    </div>
    <div class="t_box">
      <div></div>
      <div></div>
    </div>
  </div>
  </div>
</template>
<script>
import Fade from "./public/Fade";
import LSlide from "./public/LSlide_cs";
import Litem from "./public/Litem";
import Scheme from "./public/Scheme";
import Sitem from "./public/Sitem";
import More from "./public/More";
import Aitem from "./public/Aitem";
import { Get, Post, Port } from "../../server/ajax";
export default {
  data() {
    return {
      Port: Port,
      banner: [],
      scq: [],
      sbq: [],
      cjq: [],
      zxsy: [],
      hgsc: [],
      sbgj: [],
      cjjy: [],
      zq: [],
      ch: {
        title: "合规税务筹划",
        text: [
          "国家政府打理扶持补贴、奖励，企业所得税减免",
          "全程托管为您提供一对一专业服务"
        ],
        img: require("../assets/home/f_icon.png")
      },
      dj: {
        title: "全国社保代缴",
        text: [
          "支持全国337个地级市社保公积金一键购买",
          "整合各地最优社保服务商全国最低"
        ],
        img: require("../assets/home/f_icon_1.png")
      },
      cj: {
        title: "残疾人就业计划",
        text: [
          "构建以残障者的价值输出为基础的生态系统",
          "让残疾人生活也能实现自己的价值"
        ],
        img: require("../assets/home/f_icon_2.png")
      },
      schs: [
        {
          icon: require("../assets/home/s_icon_0.png"),
          title: "直播平台解决方案",
          bg: require("../assets/home/s_bg_0.jpg"),
          text:
            "适用于通过商家广告及用户充值打赏来获得盈利，并以打赏分成签约费的方式向主播支付酬劳的平台。将主播收益合理化的同时解决直播平台涉税风险 >>"
        },
        {
          icon: require("../assets/home/s_icon_1.png"),
          title: "物流平台",
          bg: require("../assets/home/s_bg_1.jpg"),
          text:
            "适用于没法向司机索要增值税发票的物流平台。将运输业务项目外包，让外包方给司机发放报酬，将司机收益合理化的同时解决物流公司增值税抵扣链条断裂问题 >>"
        },
        {
          icon: require("../assets/home/s_icon_2.png"),
          title: "医疗平台解决方案",
          bg: require("../assets/home/s_bg_2.jpg"),
          text:
            "适用于人力成本较高的私人医院。对公司的人力资源成本进行合理筹划，适当降低人力资源成本，同时适当降低高收入群体的个人所得税。 >>"
        }
      ],
      zx: [],
      hot: [
        {
          id: 3,
          title: "社保专题",
          cover: 395,
          create_time: "2017/12/20",
          href: "/zt/p3.html",
          img:
            "/public/uploads/images/20171221/150e6dcd7aefbc9bc5b51b2046c06684.png"
        },
        {
          id: 4,
          title: "社保专题22222社保专题22222",
          cover: 98,
          create_time: "2017/12/20",
          href: "/zt/p4.html",
          img:
            "/public/uploads/images/20170919/170ccfb077c9d38801ac0208d3110267.jpg"
        },
        {
          id: 17,
          title: "企业财税专题13",
          cover: 424,
          create_time: "2017/12/20",
          href: "/zt/p17.html",
          img:
            "/public/uploads/images/20180130/52f5db678ca2e642aaddeec91bfbfbb7.jpg"
        }
      ],
      counters: [
        {
          url: "/jsq/sqgz.html",
          text: ["税前工", "资计算器"]
        },
        {
          url: "/jsq/shgz.html",
          text: ["税后工", "资计算器"]
        },
        {
          url: "/guangzhoushi_shebao/",
          text: ["社保", "公积金"]
        },
        {
          url: "/jsq/nzj.html",
          text: ["年终奖", ""]
        },
        {
          url: "/jsq/lwbc.html",
          text: ["劳务报", "酬所得"]
        },
        {
          url: "/jsq/cczl.html",
          text: ["财产租赁", "所得税"]
        },
        {
          url: "/jsq/cczr.html",
          text: ["财产转让", "所得税"]
        },
        {
          url: "/jsq/orsd.html",
          text: ["偶然", "所得税"]
        }
      ]
    };
  },
  components: {
    Fade,
    LSlide,
    Litem,
    Scheme,
    Sitem,
    More,
    Aitem
  },
  created() {
    this.$parent.tState = 1;
    this.$parent.fState = 1;
  },
  mounted() {
    Get(
      `${Port}/mobile/cms/index`,
      function(data) {
        this.banner = data.banner;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/subjects`,
      {
        page_size: 3,
        cid: 105
      },
      function(data) {
        this.scq = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/subjects`,
      {
        page_size: 3,
        cid: 106
      },
      function(data) {
        this.sbq = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/subjects`,
      {
        page_size: 3,
        cid: 107
      },
      function(data) {
        this.cjq = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/news`,
      {
        page_size: 3
      },
      function(data) {
        this.zxsy = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/news`,
      {
        page_size: 3,
        cid: 101
      },
      function(data) {
        this.hgsc = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/news`,
      {
        page_size: 3,
        cid: 102
      },
      function(data) {
        this.sbgj = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/news`,
      {
        page_size: 3,
        cid: 103
      },
      function(data) {
        this.cjjy = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/news`,
      {
        page_size: 3,
        cid: 109
      },
      function(data) {
        this.zq = data;
      }.bind(this)
    );
    Post(
      `${Port}/mobile/cms/subjects`,
      {
        hot_subject: 1
      },
      function(data) {
        this.hot = data;
        setTimeout(
          function() {
            this.$parent.updata();
          }.bind(this),
          200
        );
      }.bind(this)
    );
  }
};
</script>
<style scoped>
#mbox {
  height: 6.17rem;
}
.banner {
  width: 7.5rem;
  height: 6.17rem;
  background-size: cover;
  background-position: center center;
  background-image: url("~@/assets/home/banner.png");
  padding-top: 3.2rem;
  font-size: 0.36rem;
  text-align: center;
  color: #fff;
  padding-top: 2.4rem;
  font-weight: bold;
}
#qy {
  margin: 0.72rem 0 0 0.32rem;
  color: #666;
  font-size: 0.3rem;
}
.box {
  height: 3.6rem;
  padding-top: 0.6rem;
}
.sev_c {
  text-align: center;
  font-size: 0.28rem;
  line-height: 0.54rem;
  margin-bottom: 0.2rem;
}
.sev_c > div:nth-child(1) {
  font-weight: bold;
  color: #333;
}
.sev_c > div:nth-child(2) {
  color: #999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.yh {
  display: flex;
  justify-content: space-around;
  margin-bottom: 0.2rem;
}
.yh > div {
  font-size: 0.28rem;
  flex: 1;
}
.ques {
  text-align: center;
  font-size: 0.28rem;
  margin-bottom: 0.34rem;
  color: #666;
}
#hy {
  font-size: 0.36rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}
#isr {
  background-color: #f4f5f7;
  padding: 1.06rem 0.32rem 0;
  margin-top: 1.6rem;
}
#i_head {
  width: 1.4rem;
  height: 0.49rem;
  background-size: cover;
  background-image: url("~@/assets/home/i_head.png");
}
#i_text_1 {
  margin-top: 1.6rem;
  font-size: 0.4065rem;
  font-weight: bold;
  color: #1f1f1f;
}
#i_text_1 > span {
  color: #f63603;
}
#i_text_2 {
  margin-top: 0.3rem;
  font-size: 0.2754rem;
  color: #363536;
}
#i_img {
  height: 3.78rem;
  width: calc(100% + 0.32rem);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url("~@/assets/home/i_img.png");
}
.line {
  height: 0.2rem;
  background-color: #f4f5f7;
}
#rel {
  padding-bottom: 1rem;
}
#rel > div:nth-child(1) {
  margin: 0.9rem 0.3rem 0.45rem;
  font-size: 0.3rem;
  color: #666;
}
.alist {
  font-size: 0.32rem;
  color: #333;
  /* text-align: center; */
  /* margin-top: 0.32rem; */
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 0.3rem;
}
#counter {
  padding-bottom: 1rem;
}
#counter > div:nth-child(1) {
  margin: 0.9rem 0.3rem 0;
  font-size: 0.3rem;
  color: #666;
}
#counter > div:nth-child(2) {
  margin: 0rem 0.3rem 0.3rem;
  font-size: 0.28rem;
  color: #999;
  text-align: right;
}
.c_box {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.3rem;
  color: #fff;
  justify-content: space-around;
  margin-bottom: 0.28rem;
}
.citem {
  display: table;
  width: 1.5rem;
  height: 1.5rem;
  background-color: #ed5172;
  border: 0.01rem #ed3e63;
  text-align: center;
}
.citem > div {
  display: table-cell;
  vertical-align: middle;
}
.tactic {
  padding: 1rem 0 0.8rem;
}
.tactic > div:nth-child(1) {
  color: #666;
  font-size: 0.3rem;
  margin-left: 0.32rem;
  margin-bottom: 0.6rem;
}
.t_box {
  display: flex;
  justify-content: space-around;
}
.t_box > div {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.tactic > .t_box:nth-child(2) > div:nth-child(1) {
  width: 2.19rem;
  height: 1.12rem;
  background-image: url("~@/assets/home/pa.png");
}
.tactic > .t_box:nth-child(2) > div:nth-child(2) {
  width: 2.36rem;
  height: 1.12rem;
  background-image: url("~@/assets/home/gf.png");
}
.tactic > .t_box:nth-child(3) > div:nth-child(1) {
  width: 0.96rem;
  height: 1.12rem;
  background-image: url("~@/assets/home/mt.png");
}
.tactic > .t_box:nth-child(3) > div:nth-child(2) {
  width: 2.06rem;
  height: 1.12rem;
  background-image: url("~@/assets/home/hj.png");
}
</style>
